<!DOCTYPE html>
<html>
<head>
  <title>箱子管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

  <link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <script src="/lib/jq/jquery-1.11.2.min.js"></script>
  <script src="/lib/jq/bootstrap.min.js"></script>
  <!--<script type="text/javascript" src="/js/boxM.js"></script>-->
  <script type="text/javascript">
  </script>
  <style>
    a input{
      margin-top: 10px;
    }
  </style>
</head>
<body style="margin:15px;">
<legend>箱子管理</legend>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
                data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          设置中奖率
        </h4>
      </div>
      <div class="modal-body">
        <div style="margin: 0 0 15px 20px;">机率为 0 时不启用此设置，中奖时段也无效</div>
        <form class="form-horizontal" role="form">

          <div class="form-group">
            <label for="probability1" class="col-sm-1 control-label" style="width: 60px;">机率：</label>
            <div class="col-sm-11">
              <input type="number" class="form-control" id="probability1"
                     placeholder="">
              <span>（如果设置则不使用箱子统一中奖率）</span><br>
              _______________________________________________________
              <br><br>
            </div>

          </div>

          <div class="form-group">
            <label for="probability" class="col-sm-1 control-label" style="width: 60px;">机率：</label>
            <div class="col-sm-11">
              <input type="number" class="form-control" id="probability"
                     placeholder="">
              <span>（摇多少次中一次）</span>
            </div>

          </div>

          <div class="form-group" style="margin-top: 10px;color: #006dcc;">
            <label for="times1" class="col-sm-1 control-label" style="width: 60px;">循环：</label>
            <div id="datetimepicker3" class="input-append">
              <input data-format="hh:mm:ss" type="text" id="times1"/>
              <span class="add-on">
              <i data-time-icon="icon-time" data-date-icon="icon-calendar">
              </i>
              </span>
            </div>

            <span>（每天执行一次）</span>
          </div>

          <div class="form-group" style="margin-top: 5px;color: #006dcc;">
            <label for="duration1" class="col-sm-1 control-label" style="width: 60px;">持续：</label>
            <div class="col-sm-11">
              <input type="number" class="form-control" id="duration1"
                     placeholder="">
              <button type="button" class="btn btn-default" id="addLoop">添加
              </button>
              <span>分钟（持续时间）</span>
            </div>

          </div>

          <div class="form-group" style="margin-top: 15px;color: #499249;">
            <label for="times1" class="col-sm-1 control-label" style="width: 60px;">单次：</label>
            <div id="datetimepicker2" class="input-append date">
              <input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="times2">
              <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar">
                </i>
              </span>
            </div>

            <span>（指定时间执行一次）</span>
          </div>

          <div class="form-group" style="margin-top: 5px;color: #499249;">
            <label for="duration2" class="col-sm-1 control-label" style="width: 60px;">持续：</label>
            <div class="col-sm-11">
              <input type="number" class="form-control" id="duration2"
                     placeholder="">
              <button type="button" class="btn btn-default" id="addOnce">添加
              </button>
              <span>分钟（持续时间）</span>
            </div>

          </div>


          <div class="form-group" style="margin-top: 15px;" id="timesGroup">



          </div>
        </form>
      </div>
      <div class="modal-footer" style="padding-bottom: 15px;">
        <!--<button type="button" class="btn btn-default" data-dismiss="modal">关闭
        </button>-->
        <button type="button" class="btn btn-primary" id="submit">
          提交更改
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>

</body>

<link rel="stylesheet" type="text/css" href="/js/datetimepicker/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="/js/datetimepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/datetimepicker/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">

  var looptimes = new Array();//循环时间
  var oncetimes = new Array();//执行一次的时间
  var count=1;
  var loopcount=0;//记录数组下标
  var oncecount=0;
  var boxid='<%=boxid%>';
//  alert(boxid);
  /**
   * 打开模态框
   * @param boxid
   */
  /*function openModal(box_id){
    boxid = box_id;
    $('#myModal').modal('toggle');

  }*/
  $('#myModal').modal('toggle');

  $(function() {

    $('#datetimepicker3').datetimepicker({
      maskInput: true,
      pickDate: false
    });
    var picker = $('#datetimepicker3').data('datetimepicker');

    $('#datetimepicker2').datetimepicker({
      maskInput: true,
      format: 'yyyy/MM/dd hh:mm:ss',
      language: 'zh-CN'
    });


    var picker1 = $('#datetimepicker3').data('datetimepicker');
    $('#addLoop').click(function(){
        var date = picker.getLocalDate();
      var times1 = $('#times1').val();
      var duration1 = $('#duration1').val();//持续时间
      looptimes.push(times1+'~'+duration1);
      console.log(date.toString()+'~~~~~~~~'+times1);
      $('#timesGroup').append('<button type="button" class="btn btn-default" id="alarms'+count+'"' +
              ' style="margin: 8px 3px 0 0;" onclick="delalarm('+count+','+loopcount+')">'+times1+' ['+duration1+'分钟]</button>');
      count++;
      loopcount++;
    });
    $('#addOnce').click(function(){
      var date = picker1.getLocalDate();
      var times2 = $('#times2').val();
      console.log(date.toString());
      var duration2 = $('#duration2').val();//持续时间
      oncetimes.push(times2+'~'+duration2);

      $('#timesGroup').append('<button type="button" class="btn btn-default"  id="alarms'+count+'"' +
              ' style="margin: 8px 3px 0 0;" onclick="delalarm1('+count+','+oncecount+')">'+times2+' ['+duration2+'分钟]</button>');
      count++;
      oncecount++;
    });

    $('#submit').click(function(){
      var newTimeArr =  looptimes.concat(oncetimes).join(',');
      var probability = $('#probability').val();
      var probability1 = $('#probability1').val();
      $.post('/box_management/setHappyTime',{boxid:boxid, newTimeArr:newTimeArr,probability:probability,probability1:probability1},function(result){
        //alert(result.msg);
//        history.go(-1);
        if(result.isadmin){//需要改不安全
          window.location.href="/box_management/box?num=1";
        }else{
          window.location.href="/user_system/buyer_box?num=1&&account="+result.account;
        }

      });
    });
  });
  function delalarm(count,loopcount){
    $('#alarms'+count).remove();
    looptimes.splice(loopcount,1);
  }
  function delalarm1(count,oncecount){
    $('#alarms'+count).remove();
    oncetimes.splice(oncecount,1)
  }

</script>
</html>